<template>
    <vue-particles
        class="main-background"
        :style="{  
            'background': `${$config.backgrounds[Math.floor(Math.random()*$config.backgrounds.length)]} no-repeat fixed`,'background-size': `100% 100%`
            }"
        color="#dedede"
        :particleOpacity="0.5"
        :particlesNumber="20"
        :particleSize="15"
        shapeType="circle"
        linesColor="#cfcfcf"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.26"
        :linesDistance="650"
        :moveSpeed="2"
        :hoverEffect="false"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
    ></vue-particles>
    <div class="main" :style="{ background: $config.mask  }" >
        <Navbar />
        <Content />
        <Footer />
    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Content from '../components/Content.vue'
import Footer from '../components/Footer'

export default {
    name: 'Main',
    props: {},
    components: {
        Navbar,
        Content,
        Footer
    },
}
</script>

<style lang="stylus" scoped>
@require '../styles/mixins.styl'
@require '../styles/mode.styl'

.main-background
    position fixed
    top 0
    z-index 0
    width 100%
    height 100%

.main
    z-index 0
</style>
